<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">客户数(人)</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_customer"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "customerNumber",
        data(){
            return{
                number: 0,
               time:null,
               option:{
                   tooltip: {
                       trigger: 'axis',
                       axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                           type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                       }
                   },
                   legend: {
                       data: ['个人', '机构','同业'],
                       textStyle:{
                           color: '#ffffff'//字体颜色
                       },
                   },
                   grid: {
                       left: '3%',
                       right: '4%',
                       bottom: '3%',
                       containLabel: true
                   },
                   xAxis: {
                       type: 'value',
                       axisLabel: {
                           show: true,
                           textStyle: {
                               color: '#ffffff'
                           }
                       },
                   },
                   yAxis: {
                       type: 'category',
                       axisLabel: {
                           show: true,
                           textStyle: {
                               color: '#ffffff'
                           }
                       },
                       data: ['2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09']
                   },
                   series: [
                       {
                           name: '个人',
                           type: 'bar',
                           stack: '总量',
                           label: {
                               show: true,
                               position: 'insideRight'
                           },
                           data: [1548000, 1540600, 1540900, 1541100, 1541300, 1541489]
                       },
                       {
                           name: '机构',
                           type: 'bar',
                           stack: '总量',
                           label: {
                               show: true,
                               position: 'insideRight'
                           },
                           data: [12, 12, 12, 10, 6, 4]
                       },
                       {
                           name: '同业',
                           type: 'bar',
                           stack: '总量',
                           label: {
                               show: true,
                               position: 'insideRight'
                           },
                           data: [7880, 7860, 7750, 7858, 7800, 7700]
                       },
                   ]
               }
            }
        },
        mounted() {
            this.getEchart();
        },
        methods:{
            getEchart() {
                let myChart = echarts.init(document.getElementById('chart_customer'));
                // myChart.on('updateAxisPointer', function (event) {
                //     var xAxisInfo = event.axesInfo[0];
                //     if (xAxisInfo) {
                //         var dimension = xAxisInfo.value + 1;
                //         myChart.setOption({
                //             series: {
                //                 id: 'pie',
                //                 label: {
                //                     formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                //                 },
                //                 encode: {
                //                     value: dimension,
                //                     tooltip: dimension
                //                 }
                //             }
                //         });
                //     }
                // });

                myChart.setOption(this.option, true);
                // this.timer = setInterval(() => {
                //     myChart.dispatchAction({
                //         type: 'showTip',
                //         seriesIndex: 0,
                //         dataIndex: this.number
                //     });
                //
                //     this.number++;
                //
                //     if (this.number > 7) {
                //         this.number = 0;
                //     }
                // }, 3000);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
.sn-container {
    left: 50px;
    top: 3270px;
    width: 600px;
    height: 400px;
    .chartsdom {
        width: 100%;
        height: 100%;
    }
}
</style>